class DraggableResizableCard extends HTMLElement {
  constructor() {
    super();
    // 创建 Shadow DOM
    const shadow = this.attachShadow({ mode: "open" });
    // 设置默认样式
    const style = document.createElement("style");
    style.textContent = `
    :host {
        position: fixed;
        top:100px;
        left:325px;
        display: none;
        width: 300px;
        height: 500px;
        background-color: #fff;
        border-radius: 8px;
        z-index: 9999;
        user-select: none;
        overflow: hidden;
        box-shadow: 0 2px 14px #00000026;
    }
    .dz-card {
      display: flex;
      flex-direction: column;
      height:100%;
      overflow: hidden;
    }
    .card-header {
        display: flex;
        justify-content: space-between;
        height: 30px;
        flex-shrink: 0;
        background-image: linear-gradient(90deg,#fcfcfc 0%,#fbfbfb 100%);
        color: white;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        cursor: move;
        font-size: 14px;
        font-weight: bold;
        color: rgb(45, 45, 45);
        height:2.75rem;
        border-bottom:1px rgb(242, 243, 245) solid;
    }
    .dz-close-icon {
      cursor: pointer;
    }
    .dz-close-icon-text {
      width:20px;
      height:20px;
    }
    .tabs {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        border-bottom: 1px rgb(242, 243, 245) solid;
        scrollbar-width: none; /* Firefox 隐藏滚动条 */
        -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
    }
    .tab {
        padding: 8px;
        cursor: pointer;
        border: none;
        background: none;
        color: #777;
        font-size: 12px;
        flex-shrink: 0;
    }
    .tab.active {
        color: #007bff;
        border-bottom: 2px solid #007bff;
    }
    .card-content {
        position: relative;
        flex:1;
        overflow-y: auto;
        font-size:12px;
        color:#2f3640;
    }

    /* 滚动条整体部分 */
    .card-content::-webkit-scrollbar {
        width: 5px; /* 设置滚动条宽度 */
        right: 5px; /* 设置滚动条距离右边的距离 */
    }

    /* 滚动条轨道 */
    .card-content::-webkit-scrollbar-track {
        background: none; /* 轨道背景颜色 */
        border-radius: 5px; /* 圆角效果 */
    }

    /* 滚动条滑块 */
    .card-content::-webkit-scrollbar-thumb {
        background: #f5f5f5; /* 滑块颜色 */
        border-radius: 4px; /* 圆角效果 */
    }

    /* 滑块悬停时的样式 */
    .card-content::-webkit-scrollbar-thumb:hover {
        background: #333; /* 悬停时的颜色 */
    }

    .sub-category {
        margin-top: 10px;
    }
    .sub-category-title {
        padding-left:10px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .data-item {
      padding:5px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 5px;
    }
   
    .data-item-content {
      color:#fff;
      felx-shrink:0;
      display: flex;
      flex-direction: row;
      background-image:linear-gradient(#45507a, #69728b);
      margin-right:5px;
      margin-bottom:5px;
      border-radius:5px;
      overflow:hidden;
      cursor:pointer;

    }
    .data-item-content:hover {
      transform: translateY(-1px);
      transition: all .2s ease-in-out;
      box-shadow: 0 3px 2px rgba(51, 54, 67, .25);
    }
    .data-item-inner {
      position:relative;
      width:100%;
      box-sizing:border-box;
      overflow:hidden;
      cursor:pointer;
    }

    .inner-img-box {
      border-radius:5px;
      height:110px;
      border:1px #f5f5f5 solid;
    }

    .inner-img {
      width:100%;
    }
    .inner-text {
      display:flex;
      justify-content:center;
      align-items:center;
      padding:5px;
      font-size:12px;
    }
    .inner-subtext {
      display:flex;
      justify-content:center;
      align-items:center;
      padding:5px;
      font-size:12px;
      background:linear-gradient(#6f80b2, #5475f6);
    }

    .resize-handle {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 16px;
        height: 16px;
        background-color: #007bff;
        cursor: se-resize;
    }
`;
    // 创建卡片结构
    const card = document.createElement("div");
    card.className = "dz-card";
    let cardName = this.getAttribute("name") || "提示词";
    card.innerHTML = `
    <div class="card-header">
      <span>${cardName}</span>
      <div class="dz-close-icon">
        <svg t="1740388789766" class="dz-close-icon-text" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2621" width="48" height="48"><path d="M512 466.944l233.472-233.472a31.744 31.744 0 0 1 45.056 45.056L557.056 512l233.472 233.472a31.744 31.744 0 0 1-45.056 45.056L512 557.056l-233.472 233.472a31.744 31.744 0 0 1-45.056-45.056L466.944 512 233.472 278.528a31.744 31.744 0 0 1 45.056-45.056z" fill="#5A5A68" p-id="2622"></path></svg>
      </div>
    </div>
    <div class="tabs"></div>
    <div class="card-content"></div>
    <div class="resize-handle"></div>
`;
    // 将样式和内容添加到 Shadow DOM
    shadow.appendChild(style);
    shadow.appendChild(card);
    // 初始化状态
    this.isDragging = false;
    this.isResizing = false;
    this.startX = 0;
    this.startY = 0;
    this.startWidth = 0;
    this.startHeight = 0;
    // 获取 DOM 元素
    this.cardHeader = shadow.querySelector(".card-header");
    this.resizeHandle = shadow.querySelector(".resize-handle");
    this.tabsContainer = shadow.querySelector(".tabs");
    this.tabContentContainer = shadow.querySelector(".card-content");
    // 绑定事件
    this.initEvents();

    // 绑定关闭按钮事件
    const closeButton = shadow.querySelector(".dz-close-icon");
    closeButton.addEventListener("click", () => {
      this.hide(); // 调用隐藏方法
    });
  }

  initEvents() {
    // 拖拽功能
    this.cardHeader.addEventListener("mousedown", (e) => {
      this.isDragging = true;
      this.startX = e.clientX - this.offsetLeft;
      this.startY = e.clientY - this.offsetTop;
    });

    // 调整大小功能
    this.resizeHandle.addEventListener("mousedown", (e) => {
      this.isResizing = true;
      this.startWidth = this.offsetWidth;
      this.startHeight = this.offsetHeight;
      this.startX = e.clientX;
      this.startY = e.clientY;
    });

    // 全局鼠标移动事件
    document.addEventListener("mousemove", (e) => {
      if (this.isDragging) {
        const x = e.clientX - this.startX;
        const y = e.clientY - this.startY;
        this.style.left = `${x}px`;
        this.style.top = `${y}px`;
      }
      if (this.isResizing) {
        const width = this.startWidth + (e.clientX - this.startX);
        const height = this.startHeight + (e.clientY - this.startY);
        this.style.width = `${Math.max(width, 300)}px`; // 最小宽度为 300px
        this.style.height = `${Math.max(height, 500)}px`; // 最小高度为 500px
      }
    });

    // 全局鼠标松开事件
    document.addEventListener("mouseup", () => {
      this.isDragging = false;
      this.isResizing = false;
    });
  }

  connectedCallback() {
    // 动态生成选项卡
    const tabsData = [
      {
        title: "质量",
        content: [
          {
            name: "Quality",
            key: "quality",
            data: [
              {
                prompt: "UHD",
                title: "超高清",
                url: "",
              },
              {
                prompt: "anatomically correct",
                title: "解剖学正确",
                url: "",
              },
              {
                prompt: "ccurate",
                title: "准确",
                url: "",
              },
              {
                prompt: "textured skin",
                title: "质感皮肤",
                url: "",
              },
              {
                prompt: "super detail",
                title: "非常详细",
                url: "",
              },
              {
                prompt: "high details",
                title: "高细节",
                url: "",
              },
              {
                prompt: "award winning",
                title: "屡获殊荣",
                url: "",
              },
              {
                prompt: "best quality",
                title: "最佳质量",
                url: "",
              },
              {
                prompt: "high quality",
                title: "高质量",
                url: "",
              },
            ],
          },
          {
            name: "画质",
            key: "quality",
            data: [
              {
                prompt: "1080P",
                title: "1080P",
                url: "",
              },
              {
                prompt: "retina",
                title: "视网膜屏",
                url: "",
              },
              {
                prompt: "HD",
                title: "HD",
                url: "",
              },
              {
                prompt: "16k",
                title: "16k",
                url: "",
              },
              {
                prompt: "8k",
                title: "8k",
                url: "",
              },
              {
                prompt: "4K",
                title: "4K",
                url: "",
              },
            ],
          },
        ],
      },
      {
        title: "画面效果",
        content: [
          {
            name: "Style",
            key: "style",
            data: [
              {
                prompt: "chiaroscuro",
                title: "明暗对比",
                url: "",
              },
              {
                prompt: "depth of field",
                title: "背景虚化",
                url: "",
              },
              {
                prompt: "cinematic lighting",
                title: "电影光效",
                url: "",
              },
              {
                prompt: "chromatic aberration",
                title: "色差",
                url: "",
              },
              {
                prompt: "motion blur",
                title: "动态模糊",
                url: "",
              },
              {
                prompt: "sparkle",
                title: "闪耀效果",
                url: "",
              },
              {
                prompt: "jpeg artifacts",
                title: "JPEG 压缩失真",
                url: "",
              },
              {
                prompt: "blurry",
                title: "模糊的",
                url: "",
              },
              {
                prompt: "glowing light",
                title: "荧光",
                url: "",
              },
              {
                prompt: "god rays",
                title: "神圣感顶光",
                url: "",
              },
              {
                prompt: "ray tracing",
                title: "光线追踪",
                url: "",
              },
              {
                prompt: "reflection light",
                title: "反射光",
                url: "",
              },
              {
                prompt: "backlighting",
                title: "逆光",
                url: "",
              },
              {
                prompt: "blending",
                title: "混合",
                url: "",
              },
              {
                prompt: "bloom",
                title: "盛开",
                url: "",
              },
              {
                prompt: "chromatic aberration abuse",
                title: "色差滥用",
                url: "",
              },
              {
                prompt: "dithering",
                title: "抖动",
                url: "",
              },
              {
                prompt: "drop shadow",
                title: "立绘阴影",
                url: "",
              },
              {
                prompt: "film grain",
                title: "胶片颗粒感/老电影滤镜",
                url: "",
              },
              {
                prompt: "halftone",
                title: "半调风格",
                url: "",
              },
              {
                prompt: "image fill",
                title: "图像填充",
                url: "",
              },
              {
                prompt: "motion lines",
                title: "体现运动的线",
                url: "",
              },
              {
                prompt: "multiple monochrome",
                title: "多重单色",
                url: "",
              },
              {
                prompt: "optical illusion",
                title: "视错觉",
                url: "",
              },
              {
                prompt: "anaglyph",
                title: "互补色",
                url: "",
              },
              {
                prompt: "stereogram",
                title: "立体画",
                url: "",
              },
              {
                prompt: "scanlines",
                title: "扫描线",
                url: "",
              },
              {
                prompt: "silhouette",
                title: "剪影",
                url: "",
              },
              {
                prompt: "speed lines",
                title: "速度线",
                url: "",
              },
              {
                prompt: "vignetting",
                title: "晕影",
                url: "",
              },
              {
                prompt: "Fujicolor",
                title: "富士色彩",
                url: "",
              },
            ],
          },
        ],
      },
      {
        title: "构图",
        content: [
          {
            name: "镜头",
            key: "style",
            data: [
              {
                prompt: "lens flare",
                title: "镜头光晕",
                url: "",
              },
              {
                prompt: "overexposure",
                title: "过曝",
                url: "",
              },
              {
                prompt: "bokeh",
                title: "背景散焦",
                url: "",
              },
              {
                prompt: "caustics",
                title: "焦散",
                url: "",
              },
              {
                prompt: "diffraction spikes",
                title: "衍射十字星",
                url: "",
              },
              {
                prompt: "emphasis lines",
                title: "集中线",
                url: "",
              },
              {
                prompt: "foreshortening",
                title: "正前缩距透视法",
                url: "",
              },
              {
                prompt: "satellite image",
                title: "卫星鸟瞰",
                url: "",
              },
              {
                prompt: "macro photo",
                title: "微距照片",
                url: "",
              },
              {
                prompt: "360 view",
                title: "360 度视角",
                url: "",
              },
              {
                prompt: "Wide-Angle",
                title: "广角",
                url: "",
              },
              {
                prompt: "Ultra-Wide Angle",
                title: "超广角",
                url: "",
              },
              {
                prompt: "Eye-Level Shot",
                title: "人眼视角拍摄",
                url: "",
              },
              {
                prompt: "f/1.2",
                title: "光圈 F1.2",
                url: "",
              },
              {
                prompt: "f/1.8",
                title: "光圈 F1.8",
                url: "",
              },
              {
                prompt: "f/2.8",
                title: "光圈 F2.8",
                url: "",
              },
              {
                prompt: "f/4.0",
                title: "光圈 F4.0",
                url: "",
              },
              {
                prompt: "f/16",
                title: "光圈 F16",
                url: "",
              },
              {
                prompt: "35mm",
                title: "焦距 35mm",
                url: "",
              },
              {
                prompt: "85mm",
                title: "焦距 85mm",
                url: "",
              },
              {
                prompt: "135mm",
                title: "焦距 135mm",
                url: "",
              },
              {
                prompt: "Nikon",
                title: "尼康",
                url: "",
              },
              {
                prompt: "Canon",
                title: "佳能",
                url: "",
              },
              {
                prompt: "Fujifilm",
                title: "富士",
                url: "",
              },
              {
                prompt: "Hasselblad",
                title: "哈数",
                url: "",
              },
              {
                prompt: "Sony FE",
                title: "索尼镜头",
                url: "",
              },
              {
                prompt: "Sony FE GM",
                title: "索尼大师镜头",
                url: "",
              },
            ],
          },
          {
            name: "视角",
            key: "style",
            data: [
              {
                prompt: "first-person view",
                title: "第一人称视角",
                url: "",
              },
              {
                prompt: "pov",
                title: "主观视角",
                url: "",
              },
              {
                prompt: "three sided view",
                title: "三视图",
                url: "",
              },
              {
                prompt: "multiple views",
                title: "多视图",
                url: "",
              },
              {
                prompt: "cut-in",
                title: "插入画面",
                url: "",
              },
              {
                prompt: "blurry foreground",
                title: "前景模糊",
                url: "",
              },
              {
                prompt: "close-up",
                title: "特写镜头",
                url: "",
              },
              {
                prompt: "cowboy shot",
                title: "七分身镜头",
                url: "",
              },
              {
                prompt: "vanishing point",
                title: "远景透视画法",
                url: "",
              },
              {
                prompt: "wide shot",
                title: "广角镜头",
                url: "",
              },
              {
                prompt: "from above",
                title: "俯视镜头",
                url: "",
              },
              {
                prompt: "from below",
                title: "仰视镜头",
                url: "",
              },
              {
                prompt: "from side",
                title: "角色的侧面",
                url: "",
              },
              {
                prompt: "panorama",
                title: "全景",
                url: "",
              },
              {
                prompt: "perspective",
                title: "透视画法",
                url: "",
              },
              {
                prompt: "rotated",
                title: "经过旋转的",
                url: "",
              },
            ],
          },
        ],
      },
    ];

    // 动态生成选项卡标题
    tabsData.forEach((tab, tabIndex) => {
      const tabButton = document.createElement("button");
      tabButton.className = "tab";
      tabButton.textContent = tab.title;
      tabButton.addEventListener("click", () =>
        this.switchTab(tabIndex, tabsData)
      );
      this.tabsContainer.appendChild(tabButton);

      // 默认显示第一个选项卡内容
      if (tabIndex === 0) {
        this.renderTabContent(tab);
        tabButton.classList.add("active");
      }
    });
  }

  // 切换选项卡
  switchTab(index, tabsData) {
    // 移除所有选项卡的 active 类
    const tabs = this.shadowRoot.querySelectorAll(".tab");
    tabs.forEach((tab) => tab.classList.remove("active"));

    // 添加当前选项卡的 active 类
    tabs[index].classList.add("active");

    // 渲染当前选项卡内容
    this.renderTabContent(tabsData[index]);
  }

  // 渲染选项卡内容
  renderTabContent(tab) {
    this.tabContentContainer.innerHTML = ""; // 清空内容
    tab.content.forEach((subCategory) => {
      const subCategoryDiv = document.createElement("div");
      subCategoryDiv.className = "sub-category";

      // 子分类标题
      const subCategoryTitle = document.createElement("div");
      subCategoryTitle.className = "sub-category-title";
      subCategoryTitle.textContent = subCategory.name;
      subCategoryDiv.appendChild(subCategoryTitle);

      const dataItem = document.createElement("div");
      dataItem.className = "data-item";
      // 数据项
      subCategory.data.forEach((item) => {
        const dataItemContent = document.createElement("div");
        dataItemContent.className = "data-item-content";
        dataItemContent.setAttribute("prompt", item.prompt);

        const name_key = document.createElement("div");
        name_key.className = "inner-text";
        name_key.textContent = item.prompt;

        dataItemContent.appendChild(name_key);
        if (item.prompt !== item.title) {
          const name_subname = document.createElement("div");
          name_subname.className = "inner-subtext";
          name_subname.textContent = item.title;
          dataItemContent.appendChild(name_subname);
        }

        // 绑定点击事件
        dataItemContent.addEventListener("click", () => {
          const textarea = document.querySelector(
            "#primaryPromptWrapper textarea"
          );
          if (textarea.value.trim() !== "") {
            textarea.value += ", "; // 如果有内容，先加逗号分隔
          }
          textarea.value += item.prompt; // 追加 prompt
        });

        dataItem.appendChild(dataItemContent);
      });
      subCategoryDiv.appendChild(dataItem);

      this.tabContentContainer.appendChild(subCategoryDiv);
    });
  }

  // 显示组件
  show() {
    this.style.display = "block";
  }

  // 隐藏组件
  hide() {
    this.style.display = "none";
  }
}